<template>
	<scroll-view class="full box relative collect-line-wrap" scroll-y>
		<!-- <view class="record-item" v-for="item in list" :key="item.id">

		</view> -->
		<view class="line-item" v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
			<view class="line-image">
				<image :src="item.image" class="full" mode="widthFix"></image>
			</view>
			<view class="line-address">
				<text>{{ item.name }}</text>
			</view>
		</view>
		<view class="empty-wrapper" v-if="isEmpty">
			<u-empty text="暂无收藏" icon="/pages-bundle/static/icon/collect-empty.png" />
		</view>
		<view class="loadmore-wrapper">
			<u-loadmore icon-color="#3c9cff" :status="status" loading-icon="semicircle" />
		</view>
	</scroll-view>
</template>

<script>
	import { LOAD_MORE } from '@/constant/index.js'
	export default {
		created() {
			this.initData()
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: `/pages-bundle/line-detail/line-detail?id=${id}&event=1`
				})
			},
			async initData(clear = false) {
				if (clear) {
					this.page = 1
					this.status = LOAD_MORE.LOADING
					this.list = []
					this.isEmpty = false
				}
				if (this.status === LOAD_MORE.NO_MORE) return
				this.status = LOAD_MORE.LOADING
				const { page, pageSize, type } = this
				const resp = await this.$request({
					url: "/index/getMyCollect",
					data: { type, page, list_rows: pageSize },
				})
				console.log(resp, 'resp');
				await this.$delay(300)
				const { code, data, msg } = resp
				if (code !== 1) {
					this.hasInit = false
					this.status = LOAD_MORE.LOAD_MORE
					return this.$toast({ title: msg })
				}
				const { data: list, total, current_page, per_page } = data
				if (!!list && list.length) {
					this.list.push(...list.map(item => {
						const { cover_image: image, id, line_name: name } = item
						return { image, id, name }
					}))
				}
				this.hasInit = true
				this.isEmpty = this.list.length === 0
				const hasMore = current_page * per_page < total
				if (hasMore) {
					this.page += 1
					return this.status = LOAD_MORE.LOAD_MORE
				}
				this.status = LOAD_MORE.NO_MORE
			},
		},
		computed: {},
		data() {
			return {
				type: 1,
				list: [],
				page: 1,
				pageSize: 15,
				isEmpty: false,
				status: LOAD_MORE.LOAD_MORE,
				hasInit: false,
			}
		}
	}
</script>

<style lang="scss" scoped>
	.collect-line-wrap {
		padding: 0 32rpx;

		.line-item {
			position: relative;
			box-sizing: border-box;
			border-radius: 16rpx;
			height: 344rpx;
			overflow: hidden;
			margin-bottom: 16rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.line-address {
				position: absolute;
				left: 16rpx;
				bottom: 16rpx;
				height: 40rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 40rpx;
			}

			.line-image {
				width: 100%;
				height: 100%;
			}

		}
	}
</style>